<template>
	<view class="main">
		<view class="close" @click="back">
			<u-icon name="arrow-left" size="40"></u-icon>
		</view>

		<view class="main-bg flex flex-jc-c flex-ai-c">
			<!-- <view style="color: aliceblue;"></view> -->
			<!-- 接收中 -->
			<!-- v-if="!isAccept" -->
			<view class="">
				<!-- <image style="border: 0;width: 80rpx;height: 80rpx;" :src="gather.userinfo.handimg"></image> -->
				<image style="border: 0;width: 80rpx;height: 80rpx;" src="../../static/img/yy.jpg"></image>
				<view>
					<text class="main-name text">{{gather.userinfo.username}}</text>
				</view>
			</view>
			<!-- 通话中 -->
			<view id="myVideoPlayer" style="position: absolute;top: 0;left: 0;"></view>
			<!-- <video :src="url+gather.selfInfo.userid+'.flv'" ref="video1" autoplay class="video" id="myPlayer"></video> -->

			<!-- 拉流 -->
			<view style="position: fixed;top: 100rpx;left: 20rpx;z-index: 10;">
				<!-- <video :src="url+gather.userinfo.userid+'.flv'" ref="video2" autoplay class="video"
					style="width: 200rpx;height: 200rpx;"></video> -->
			</view>
		</view>
		<view class="main-btn flex flex-jc-sb" v-if="gather.palyerType === 1">

			<view class="refuse flex flex-jc-c flex-ai-c flex-dir-c" @click="onRefuse">
				<u-icon name="phone-fill" size="50" color="#fff" style="transform: rotate(140deg);"></u-icon>
				<!-- <text class="text">挂断</text> -->
			</view>

			<view class="accept flex flex-ai-c flex-jc-c flex-dir-c" @click="onAccept">
				<u-icon name="phone-fill" size="50" color="#fff"></u-icon>
				<!-- <text class="text">接听</text> -->
			</view>
		</view>

		<view class="main-btn flex flex-jc-sb" v-else-if="gather.palyerType === 2">
			<view class="accept flex flex-jc-c flex-ai-c" @click="switchCamera">
				<u-icon name="reload" size="60" color="#fff"></u-icon>
			</view>

			<view class="refuse flex flex-jc-c flex-ai-c" @click="onRefuse">
				<!-- <text class="text">取消</text> -->
				<u-icon name="phone-fill" size="50" color="#fff" style="transform: rotate(140deg);"></u-icon>
			</view>
		</view>

		<view class="main-btn flex flex-jc-fe" v-else-if="gather.palyerType === 3">
			<!-- <view class="accept flex flex-jc-c flex-ai-c" @click="switchCamera">
				<u-icon name="reload" size="60" color="#fff"></u-icon>
			</view> -->

			<view class="refuse flex flex-jc-c flex-ai-c flex-dir-c" @click="onRefuse">
				<u-icon name="phone-fill" size="50" color="#fff" style="transform: rotate(140deg);"></u-icon>
				<!-- <text class="text">挂断</text> -->
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	// #ifdef H5
	import flvjs from 'flv.js'
	// #endif
	// import chatCard from '@/components/chatCard/chatCard.js'
	import {
		reactive,
		inject,
		ref
	} from 'vue'
	import {
		onLoad, onUnload
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	// import NodePlayer from '@/static/js/NodePlayer/NodePlayer.min.js'
	const store = useStore()
	let gather : any = reactive({
		userinfo: {},//接收者
		selfInfo: uni.getStorageSync('userinfo'),//自己的
		palyerType: 0,
	})
	const socket : any = inject("$socket");
	let all : any = reactive({
		config: {
			muted: false, //是否静音
			beauty: 0, //美艳0-9
			whiteness: 0, //美白0-9
			backgroundMute: true, //进入后台是否静音
			enableMic: true, //开启关闭麦克风
			audioVolumeType: 'voicecall', //媒体音量
			enableCamera: true, //是否开启摄像头
		},
		pusherCalss: {
			width: '100%',
			height: '80%'
		},

		// form本人测试请求的参数，不发请求可以不加
		form: {
			liveroomTitle: null, // 标题
			equipmentType: 1 // 设备类型（1.手机 2.电脑）
		},
		startState: false, // 直播状态（false 关闭）
		context: null
	})
	let video1 = ref<HTMLVideoElement>()	//自己
	let video2 = ref<HTMLVideoElement>()	//他人
	let myVideo = ref(null)
	let player = null
	// @ts-ignore
	let url = ref(`${uni.$liveUrl}/live/`)
	const back = () => {
		uni.navigateBack()
	}
	onUnload(() => {
		socket.removeListener('onRefuse')
		socket.removeListener('onAccept')
		player.release(true)
	})
	onLoad((props) => {
		gather.palyerType = JSON.parse(props.palyerType)
		all.pusherCalss.height = uni.getSystemInfoSync().screenHeight
		gather.userinfo = store.state.chatUser
		console.log(gather.userinfo)
		//挂断
		socket.on('onRefuse', (data : any) => {
			back()
		})
		//同意通话
		socket.on('onAccept', (data : object) => {
			gather.palyerType = 3	//1接收 2发送 3通话中
			// turnCamera()
			handelNodePlayer()
		})

	})

	const handelNodePlayer = () => {
		let cv = document.createElement("canvas")
		let myVideoPlayer = document.getElementById('myVideoPlayer')
		cv.id = "video"
		cv.style.cssText = "width: 100vw;height: 100vh;"
		myVideoPlayer.appendChild(cv)
		// @ts-ignore
		player = new NodePlayer();
		player.setView(cv.id);
		player.setBufferTime(500);
		player.setScaleMode(2);
		// @ts-ignore
		player.start(`${uni.$baseUrl}:100/live/${gather.userinfo.userid || 11}.flv`)
	}
	const videoPlay = () => {
		let player : any = document.createElement('video')
		let myVideoPlayer = document.getElementById('myVideoPlayer')
		player.id = 'video'
		player.muted = 'muted'
		player.style = 'width:100vw;height: 100vh'
		// player.controls = true
		player.autoplay = true
		myVideoPlayer.appendChild(player)
		if (flvjs.isSupported()) {
			let flvPlayer = flvjs.createPlayer({
				type: 'flv',
				// isLive: true,
				// @ts-ignore
				url: `${uni.$liveUrl}/live/${gather.userinfo.userid || 11}.flv`,
			});
			flvPlayer.attachMediaElement(player);
			flvPlayer.load() //加载
			flvPlayer.play()
		}
	}

	// 接受
	const onAccept = () => {
		let info = {
			content: '已接受',
			boo: true,
			palyerType: 3
		}
		onPalyer(info, (data : object) => {
			gather.palyerType = 3
			socket.emit('onAccept', data)
		})
	}
	const onPalyer = (obj : object, cb : Function) => {
		let info = {
			...obj,
			type: 3, //0文字 1图片 2音频 3视频
			userid: gather.selfInfo.userid,	//自己
			receiveid: gather.userinfo.userid,//
			receiveName: gather.userinfo.username,
			receiveImg: gather.userinfo.handimg,
		}
		cb(info)
	}
	const onRefuse = () => {
		let info = {
			content: '已拒绝',
			boo: false,
			palyerType: 0
		}
		onPalyer(info, (data : object) => {
			gather.palyerType = 0
			socket.emit('onRefuse', data)
			/* chatCard({
				isShow: false,
				duration: 1500
			}) */
			back()
		})


	}
	//切换摄像头
	const switchCamera = () => {

	}

	let turnCamera = () => {
		//摄像头调用配置
		var mediaOpts = {
			audio: true,
			video: true
		}

		let promise = navigator.mediaDevices.getUserMedia(mediaOpts)
		promise.then(function (res : any) {
			myVideo.value = res
			if ("srcObject" in video1.value) {
				video1.value.srcObject = res
			} else {
				video1.value.src = window.URL.createObjectURL(res)
			}
			video1.value.play()
		}).catch(function (err) {
			console.log(err, 'err');
		})

	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

	.close {
		position: fixed;
		left: 20rpx;
		top: 20rpx;
		color: #fff;
		z-index: 2;
	}

	.main {
		width: 100%;
		height: 100%;

		.text {
			color: #fff;
			font-size: 30rpx;
		}

		&-bg {
			width: 100%;
			height: 100%;
			background: rgb(39, 40, 34);

		}

		.main-name {
			color: #fff;
		}

		.main-btn {
			width: 100%;
			position: fixed;
			bottom: 40rpx;
			padding: 0 50rpx;
			z-index: 999;
			color: #fff;

			.refuse {
				text-align: center;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: rgb(235, 69, 73);
			}

			.accept {
				text-align: center;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: rgb(2, 212, 3);
			}
		}
	}
</style>